<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom :bgColor="'bg-'+color" :isBack="false">
				<block slot="content">退货订单</block>
			</cu-custom>
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,index) in orderList" :key="index"
				 @longpress.end="itemAction(index)" :data-target="'move-box-' + index" @click="viewItem(index)">
					<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
					<view class="content">
						<view class="text-grey">{{item.phone}}</view>
						<view class="text-gray text-sm">
							共 {{orderCount(item.orderNum)}} 条订单
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">
						</view>
						<view class="cu-tag round bg-grey sm">
							{{framatDate(item.time)}}
						</view>
					</view>
					<view class="move">
						<view class="bg-grey">置顶</view>
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" :btnColor="buttonColor" @trigger="trigger" />
		
		<!-- <wheel-fab ref="fab" @trigger="trigger" /> -->
	</view>
</template>

<script>
import Vue from 'vue'
import uniFab from '../../colorui/components/uni-fab.vue'

import wheelFab from '../../colorui/components/wheel-fab.vue'
const sys_util = require('../../printerlib/util/util.js');
	export default {
		components: {
			uniFab
		},
		data() {
			return {
				modalName: null,
				skin: false,
				color: Vue.prototype.bgColor,
				buttonColor : Vue.prototype.btnColor,
				listTouchStart: 0,
				listTouchDirection: null,
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				content: [{
						iconPath: '/static/tabbar/component.png',
						text: '打印',
						url:'/pages/print/print',
						active: false
					},
					{
						iconPath: '/static/tabbar/plugin.png',
						text: '设置',
						url:'/pages/setting/setting',
						active: false
					},
					{
						iconPath: '/static/tabbar/basics.png',
						text: '设计',
						url:'/pages/basics/design',
						active: false
					}
				],
				orderList:[]
			};
		},
		onShow() {
			// TODO 后面把参数名替换成 payload
			this.color = Vue.prototype.bgColor;
			this.buttonColor = Vue.prototype.btnColor;
			var orderList = uni.getStorageSync('orderList');
			if(!orderList){
				orderList = []
			}
			console.log(orderList)
			this.orderList = orderList
			this.orderList.reverse()
			console.log(this.orderList)
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			framatDate(time){
				return sys_util.friendlyDate(time)
			},
			orderCount(order){
				return order.length
			},
			viewItem(index){
				uni.navigateTo({
					url:'../detail/detail?index='+index
				})
			},
			itemAction(index){
				var that = this
				uni.showActionSheet({
					itemList:['删除'],
					success: function (res) {
						if(res.tapIndex == 0){
							uni.showModal({
								content: '确定要移除此条记录吗',
								success(res) {
									if (res.confirm) {
										var orderList = that.orderList;
										console.log(orderList)
										orderList.reverse()
										console.log(orderList)
										orderList = orderList.splice(index,1)
										console.log(orderList)
										uni.setStorageSync('orderList',orderList)
										that.orderList = orderList
										that.orderList.reverse()
										console.log(that.orderList)
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
